<script setup lang="ts">
import { inject, useTemplateRef } from 'vue'
import { getImgSrc } from '@/views/product/reno14-pro/image/5/img-src'
import { useGsapContext } from '@/hooks'
import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import { navBarHeightKey } from '@/views/product/reno14-pro/symbol-key.ts'
import { useWindowSize } from '@vueuse/core'
import { useScrollGroup } from '@/hooks/reno14-pro.ts'

const { width } = useWindowSize()
const navBarHeight = inject(navBarHeightKey)
const { scrollGroup } = useScrollGroup()

const containerRef = useTemplateRef<HTMLDivElement | null>('containerRef')
const titleRef = useTemplateRef<HTMLDivElement | null>('titleRef')
const videoRef = useTemplateRef<HTMLVideoElement | null>('videoRef')

useGsapContext(() => {
  if (!containerRef.value || !titleRef.value || !videoRef.value) {
    return
  }

  const defaultScrollTrigger: ScrollTrigger.StaticVars = {
    trigger: containerRef.value,
    start: 'top bottom',
    end: () => {
      return `top top+=${navBarHeight?.value ?? 0}`
    },
    scrub: true,
    invalidateOnRefresh: true,
    ...scrollGroup,
  }

  gsap.fromTo(
    titleRef.value,
    {
      yPercent: 70,
    },
    {
      yPercent: 0,
      scrollTrigger: {
        ...defaultScrollTrigger,
        start: 'top center',
      },
    },
  )

  gsap.fromTo(
    videoRef.value,
    {
      scale: 2,
      yPercent: width.value >= 1024 ? -40 : -135,
    },
    {
      scale: 1,
      yPercent: 0,
      scrollTrigger: defaultScrollTrigger,
    },
  )

  ScrollTrigger.create({
    ...defaultScrollTrigger,
    onToggle: async (self) => {
      if (self.isActive) {
        await videoPlay()
      } else {
        videoStop()
      }
    },
    end: () => {
      return `bottom top+=${navBarHeight?.value ?? 0}`
    },
  })
})

const videoPlay = async () => {
  if (!videoRef.value) {
    return
  }

  await videoRef.value.play().catch()
}
const videoStop = () => {
  if (!videoRef.value) {
    return
  }

  videoRef.value.pause()
  videoRef.value.currentTime = 0
}

const descData = [
  {
    type: 'string',
    title: '3840Hz 调光',
    subtitle: '降低闪烁更护眼',
    area: 'a',
  },
  {
    type: 'string',
    title: '10.7 亿色',
    subtitle: '臻彩生动显示',
    area: 'b',
  },
  {
    type: 'string',
    title: '1.5K 分辨率',
    subtitle: '细节清晰锐利',
    area: 'c',
  },
  {
    type: 'image',
    src: getImgSrc('images-screen-logo-1.png.webp'),
    area: 'd',
  },
  {
    type: 'string',
    title: 'X 轴线性马达',
    subtitle: '马达强劲，游戏够劲',
    area: 'e',
  },
  {
    type: 'string',
    title: '立体声双扬声器',
    subtitle: '低频澎湃，高音高保真',
    area: 'f',
  },
] as const
</script>

<template>
  <div
    ref="containerRef"
    class="py-[3.5rem] overflow-hidden lg:mx-auto lg:py-[clamp(3.5rem,0.5rem+4.6875vw,5rem)]"
  >
    <div ref="titleRef" class="max-w-[84.65vw] text-center mx-auto relative -z-2 lg:max-w-[40rem]">
      <div class="text-3xl lg:text-[clamp(1.875rem,-0.375rem+3.5156vw,3rem)]">
        <p>超感巨幕影院</p>
        <p>视听触全维沉浸</p>
      </div>
      <p
        class="text-base mt-[1.375rem] lg:text-[clamp(1rem,0.75rem+0.3906vw,1.125rem)] lg:mt-[clamp(0.75rem,-0.25rem+1.5625vw,1.25rem)]"
        @click="videoPlay"
      >
        6.83 英寸超窄边大直屏，视界从未如此沉浸，养眼而且更护眼。大有震撼的双扬声器、X
        轴马达，把感官体验全拉满。
      </p>
    </div>

    <div
      class="w-full aspect-[430/121] relative mt-[12vw] lg:mt-[clamp(1.875rem,-0.875rem+4.2969vw,3.25rem)] lg:w-[clamp(46.25rem,2.25rem+68.75vw,68.25rem)] mx-auto"
    >
      <video
        ref="videoRef"
        class="w-full absolute top-0 -z-1 lg:[clip-path:inset(2px)]"
        muted
        src="@/views/product/reno14-pro/image/5/videos-screen-screen_1600.mp4"
      ></video>
    </div>

    <div :class="{ 'pc-container-content-1312-grid': width < 1024 }">
      <div class="desc-grid middle-content">
        <div
          v-for="(i, key) in descData"
          :key
          class="desc-item _rounded grid gap-y-[0.625rem]"
          :style="{ 'grid-area': i.area }"
        >
          <template v-if="i.type === 'string'">
            <p class="text-xl lg:text-[clamp(1.25rem,0rem+1.9531vw,1.875rem)]">{{ i.title }}</p>
            <p class="text-xs lg:text-[clamp(0.75rem,0.5rem+0.3906vw,0.875rem)]">
              {{ i.subtitle }}
            </p>
          </template>
          <template v-else-if="i.type === 'image'">
            <img
              class="w-[28vw] sm:w-[60%] lg:w-[clamp(7.625rem,2.875rem+7.4219vw,10rem)]"
              :src="i.src"
              alt=""
              loading="lazy"
            />
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
@reference "@/assets/main.css";

.desc-grid {
  @apply grid gap-[0.25rem] grid-cols-2  mt-[10.6vw]
  lg:w-[clamp(46.25rem,2.25rem+68.75vw,68.25rem)] lg:mx-auto
  lg:mt-[clamp(2.5rem,0rem+3.9063vw,3.75rem)] lg:gap-[clamp(0.25rem,-0.25rem+0.7813vw,0.5rem)];
  grid-template-areas:
    'a b'
    'c d'
    'e e'
    'f f';

  @media (min-width: 640px) {
    grid-template-areas:
      'a b d'
      'c e f';
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }

  @media (min-width: 1024px) {
    grid-template-areas:
      'a b c d'
      'e e f f';
    grid-template-columns: repeat(4, 1fr);
  }

  .desc-item {
    @apply bg-[#ebe8e3b2] p-[4.18vw] sm:p-[0.75rem] lg:p-[clamp(0.75rem,-0.25rem+1.5625vw,1.25rem)];
  }
}
</style>
